<template>
	<ul class="classify" >
		<li class="classify__classify active">分类<span class="sort-caret down"></span></li>
		<li v-for="(item,index) in tabs" :class="{ active: active===index }" @click="toggle(index)">
			{{item.label}}
			<span class="caret-wrap" v-if="item.sort">
				<i class="sort-caret ascending"></i>
				<i class="sort-caret descending"></i>
			</span>
		</li>
	</ul>
</template>

<script>
	const tabs = [{
		label: "综合"
	},{
		label: "发布时间"
	},{
		label: "信用",
		sort: true
	},{
		label: "价格",
		sort: true
	}]
	export default {
		data() {
			return {
				active: 0,
				tabs
			}
		},
		methods: {
			toggle(index) {
				this.active = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.classify {
		padding: 0 $com-padding-lr-base $com-padding-lr-base;
		border-bottom: 1px solid #ccc;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: $font-sm;
		.active {
			font-weight: bold;
		}
	}

</style>